<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>军标绘制（指北针）</title>
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>
    <script src="../../libs/zondyClient.js" type="text/javascript"></script>
    <style type="text/css">
        #menu {
            text-align: center;
            width: 100%;
            height: 20px;
            padding: 5px 10px;
            font-size: 14px;
            font-family: "微软雅黑";
            left: 10px;
        }
    </style>
    <script type="text/javascript">
        var map = null;
        var mapDocLayer = null;
        var drawLayer = null;
        var source = new ol.source.Vector({ wrapX: false });
        var feature = null;
        function init() {
            drawLayer = new ol.layer.Vector({
                source: source,
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        width: 1,
                        color: "rgba(245,74,76,1)"
                    }),
                    fill: new ol.style.Fill({
                        color: "rgba(255,0,0,0.7)"
                    })
                })
            });
            //初始化天地图图层
            var layer1 = new Zondy.Map.TianDiTu({
                layerType: Zondy.Enum.Map.TiandituType.VEC_IGS,
                projection: ol.proj.get('EPSG:4326'),
                //访问IGServer的IP
                ip: "develop.smaryun.com",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //天地图key
                token: parent.TiandituKey()
            });
            var layer2 = new Zondy.Map.TianDiTu({
                layerType: Zondy.Enum.Map.TiandituType.CVA_IGS,
                projection: ol.proj.get('EPSG:4326'),
                //访问IGServer的IP
                ip: "develop.smaryun.com",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //天地图key
                token: parent.TiandituKey()
            });
            //初始化地图容器
            map = new ol.Map({
                target: "mapCon",
                layers: [layer1, layer2,drawLayer],
                view: new ol.View({
                    center: [0, 0],
                    projection: ol.proj.get('EPSG:4326'),
                    maxZoom: 12,
                    minZoom: 0,
                    zoom: 2
                }),
                controls: ol.control.defaults({
                    attributionOptions: /** @type {olx.control.AttributionOptions} */({
                        collapsible: false
                    })
                }).extend([

                ])
            });
        };
        function add() {
            if (feature != null) {
                source.removeFeature(feature);
            }
            var vertices = [[90, -60], [70, -30]];
            var milStdType = $("#typeSelect").val();
            var geomArr = MilStd.Compass.getCompassFromVert(vertices, milStdType);

            var geometry = new ol.geom.GeometryCollection();
            geometry.setGeometries(geomArr);

            feature = new ol.Feature();
            feature.setGeometry(geometry);
            source.addFeature(feature);
        }
    </script>
</head>
<body onload="init()">
    <div id="menu">
        <label style="font-weight: bold;">
            要添加的指北针类型：
        </label>
        <select name="type" id="typeSelect">
            <option value="ArrowCross">十字箭头指北针</option>
            <option value="CircleClosedangle">圆形尖角指北针</option>
            <option value="Closedangle">尖角指北针</option>
            <option value="DoubleClosedangle">双向尖角指北针</option>
            <option value="Fourstar">四角指北针</option>
            <option value="Rhombus">菱形指北针</option>
            <option value="SameDirectionClosedangle">同向尖角指北针</option>
            <option value="Triangle">三角指北针</option>
            <option value="Vane">风向标指北针</option>
        </select>
        <button onclick="add()">开始添加</button>
    </div>
    <div id="mapCon" style="position: absolute;width:100%;height:92%;"></div>
</body>
</html>
